<!DOCTYPE html>
<html>
  <head>
    <title>Watermark control - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script type="text/javascript">
      // 控件 (control) 是一个相对于地图容器保持静态的 HTML 元素

      var map = L.map('map', {
        center: [40, 0],
        zoom: 1
      })

      var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
      }).addTo(map)

      // L.Control 本质是一个 HTML 元素
      L.Control.Watermark = L.Control.extend({
        onAdd: function (map) {
          var img = L.DomUtil.create('img')

          img.src = './logo.png'
          img.style.width = '200px'

          // 注册点击事件
          L.DomEvent.on(img, 'click', this._doSomething, this)

          return img
        },

        onRemove: function (map) {
          // 移除点击事件
          L.DomEvent.off(this.getContainer(), 'click', this._doSomething, this)
        },

        _doSomething: function (event) {
          this.remove()
        }
      })

      L.control.watermark = function (opts) {
        return new L.Control.Watermark(opts)
      }

      L.control.watermark({ position: 'bottomleft' }).addTo(map)
    </script>
  </body>
</html>
